{{- $title := .title | default "" }}
{{- $color := .color | default "yellow" }}
{{- $icon := .icon | default "exclamation-triangle" }}
{{- $text := .text | default "" }}
{{- $class := .class | default "mt-6 mb-8" }}
<div
  class="border-l-4 overflow-x-auto border-{{ $color }}-400 bg-{{ $color }}-50 dark:bg-{{ $color }}-950 border-1 border-{{ $color }}-100 dark:border-{{ $color }}-900 p-4 {{ $class }}">
  <div class="flex">
    <div class="shrink-0">
      <svg class="fill-{{ $color }}-500 dark:fill-{{ $color }}-400 h-7 w-7">
        <use href="#icon--{{ $icon }}"></use>
      </svg>
    </div>
    <div class="ml-3">
      {{- with $title }}
        <h3 class="text-{{ $color }}-800">
          {{ . }}
        </h3>
      {{- end }}
      <div class="mt-2">
        {{ $text }}
      </div>
    </div>
  </div>
</div>
